<template>
  <div class="mobileLogin" ref="login">
    <h1>{{ logoInfo.substationName || '求礼品网' }}</h1>
    <h2>{{ logoInfo.domainName || 'qiulipin.com' }}</h2>
    <ul class="form">
      <li>
        <i class="admin"></i>
        <input type="text" v-model="userPhone" placeholder="请输入手机号" @focus="clearPlaceholder" @blur="addPlaceholder($event, '请输入手机号')">
      </li>
      <li>
        <i class="lock"></i>
        <input type="password" v-model="password" placeholder="请输入密码" @focus="clearPlaceholder" @blur="addPlaceholder($event, '请输入密码')">
      </li>
    </ul>
    <div class="logIn">
      <b @click="loginNow">立即登录</b>
      <em>没有账号
        <strong @click="goWhere('mobileReg')">注册</strong>
      </em>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import Vue from 'vue'
import { mapGetters } from 'vuex'
import { isMobile } from '@/assets/js/utils'
import md5 from 'md5'
import tips from '@/components/base/mobile/js/tips'
Vue.use(tips)
export default {
  name: 'mobileLogin',
  computed: {
    ...mapGetters([
      'logoInfo'
    ])
  },
  data () {
    return {
      userPhone: '',
      password: ''
    }
  },
  methods: {
    goWhere (route, params) {
      this.$router.push({ name: route, query: { ...this.$route.query, ...params } })
    },
    loginNow () {
      if (this.userPhone === '') {
        this.$tips.show({
          message: '请输入用户手机号'
        })
      } else if (this.password === '') {
        this.$tips.show({
          message: '请输入密码'
        })
      } else {
        this.login()
      }
    },
    login () {
      this.$ajax.post('/api/seller/account/login', {
        userName: this.userPhone,
        password: md5(this.password),
        domain: window.location.host
      }).then((data) => {
        if (data.data.code === '200') {
          this.goWhere('mobileTips', { userName: this.userPhone })
        } else if (data.data.code === '1019') {
          this.$tips.show({
            message: '您已在' + data.data.message + '注册, 请在该域名登录'
          })
        } else {
          this.$tips.show({
            message: data.data.message
          })
        }
      })
    },
    clearPlaceholder (e) {
      e.target.placeholder = ''
    },
    addPlaceholder (e, text) {
      e.target.placeholder = text
    }
  },
  mounted () {
    // this.$nextTick(() => {
    //   this.$refs.login.style.height = document.body.offsetHeight + 'px'
    // })
  },
  beforeRouteEnter (to, from, next) {
    if (isMobile()) {
      next()
    } else {
      next({ name: 'login', query: to.query })
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.mobileLogin
  width 100%
  min-height 100%
  overflow auto
  background #ffffff
  padding 2.6rem 3.2rem
  box-sizing border-box
  h1
    font-size 2.7rem
    line-height 3.8rem
    color #333333
    font-weight bold
    text-align center
  h2
    font-size 1.3rem
    line-height 1.8rem
    color #666666
    text-align center
  .form
    li
      display flex
      justify-content space-between
      align-items center
      border-bottom 1px solid #EEEEEE
      height 1.8rem
      line-height 1.8rem
      margin-top 5rem
      i
        height 1.8rem
        width 1.5rem
      input
        caret-color #e34173
        outline none
        border none
        flex 1
        line-height 100%
        font-size 1.3rem
        color #000000
        text-align right
      .admin
        background url('../../assets/images/mobile/个人.png') no-repeat
        background-size 1.3rem
      .lock
        background url('../../assets/images/mobile/密码.png') no-repeat
        background-size 1.1rem
  .logIn
    display flex
    width 21.3rem
    margin 14.2rem auto 2rem
    flex-direction column
    align-items center
    >b
      width 100%
      height 3.8rem
      line-height 3.8rem
      border-radius 0.5rem
      background #E34173
      color #ffffff
      font-size 1.5rem
      text-align center
    >em
      align-self flex-end
      margin-top 0.4rem
      strong
        color #E34173
</style>
